<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <div style="font-size: 18px">发行记录</div>
        <!-- <el-popover placement="bottom-start" :width="400" trigger="hover">
          <template #reference>
            <el-button class="button" text>总数2013
              <el-icon>
                <ArrowDownBold />
              </el-icon>
            </el-button>
          </template>
<el-table :data="gridData">
  <el-table-column property="date" label="" />
  <el-table-column property="name" label="发行" align="center" />
  <el-table-column property="address" label="激活" align="center" />
</el-table>
</el-popover> -->
      </div>
    </template>
    <el-form :inline="true" class="demo-form-inline">
      <el-row>
        <el-col :span="22">
          <el-form-item>
            <el-input
              v-model="keywords"
              placeholder="请输入备注/卡号"
              style="height: 40px; width: 400px"
              clearable
              onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"
            />
            <el-button type="primary" class="height40" @click="searchListData"
              >搜索</el-button
            >
          </el-form-item>
          <el-form-item label="卡类型">
            <el-button
              v-for="(item, index) in searchTab.list"
              :key="item.idx"
              :type="index === idx ? 'primary' : ''"
              plain
              style="height: 40px"
              @click="tabSearchChange(index)"
              >{{ item.name }}
            </el-button>
          </el-form-item>
          <el-form-item label="发行时间">
            <el-date-picker
              v-model="addtime"
              type="daterange"
              style="height: 40px"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeTime('addtime', addtime)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item class="right">
            <el-button
              type="primary"
              @click="onSubmitAll"
              v-hasPermi="['card:record:export']"
              style="height: 40px"
              >导出发行记录</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ 'border-bottom': 'none' }"
      stripe
    >
      <el-table-column
        prop="groupName"
        label="发行渠道"
        width="200"
        v-show="showGroupName"
      >
        <template #default="scope">
          {{
            scope.row.groupId == 0
              ? '总公司' || '-'
              : scope.row.groupName || '-'
          }}
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="操作者" width="200" v-show="name" />
      <el-table-column
        prop="mobile"
        label="操作者手机号"
        width="150"
        v-show="showGroupName"
      />
      <el-table-column prop="cardTypeName" label="卡类别" width="100" />
      <el-table-column prop="StartStopTime" label="卡号区间" width="200">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="detailrow(scope.row.StartStopTime)"
            :disabled="scope.row.disabled"
          >
            {{ scope.row.StartStopTime }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="issuingTotal"
        label="发行张数"
        width="80"
        align="center"
      />
      <el-table-column prop="fee" label="发行费用" width="80" align="center" />
      <el-table-column
        prop="creationTime"
        label="发行时间"
        width="200"
        align="center"
      />
      <el-table-column prop="remark" label="备注" />
      <el-table-column fixed="right" label="操作" width="120" align="center">
        <template #default="scope">
          <el-icon
            size="22"
            :color="!scope.row.disabled ? '#1b1e24' : '#d3d3d3'"
            :style="{ cursor: !scope.row.disabled ? 'pointer' : 'not-allowed' }"
            @click="!scope.row.disabled ? onSubmit(scope.row) : null"
          >
            <Download />
          </el-icon>
        </template>
      </el-table-column>
    </el-table>

    <div class="right" style="margin-top: 20px">
      <el-config-provider :locale="zhCn">
        <el-pagination
          v-model:current-page="pageDate.page"
          v-model:page-size="pageDate.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
          @size-change="paginationChange"
          @current-change="paginationChange"
        />
      </el-config-provider>
    </div>
  </el-card>

  <!-- 下载弹窗 -->
  <el-dialog v-model="dialogTableVisible" title="下载" width="800">
    <p style="text-align: left">
      下载地址：
      <el-button type="primary" plain icon="Download" @click="download"
        >点击下载</el-button
      >
    </p>
    <div role="alert" class="el-alert pl0 mt20 el-alert--info is-light">
      <div class="el-alert__content">
        <!-- <span class="el-alert__title">注：如直接点击链接无法下载，请右键点击上面的链接，选择链接另存为</span> -->
        <span class="el-alert__title">注：请点击按钮进行下载</span>
        <i class="el-alert__closebtn el-icon-close" style="display: none"></i>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" plain @click="dialogTableVisible = false"
          >关闭</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { formatDate } from '@/utils/index.js';
// 下载
import { ElMessage } from 'element-plus';
import {
  couponExportPass,
  couponSendExport,
  getCouponLogList,
} from '@/api/zyCard/zyCard.js';
const user = JSON.parse(localStorage.getItem('userDateInfo') || '{}');
const dialogTableVisible = ref(false);
const router = useRouter();
const keywords = ref('');
const addtime = ref('');
const idx = ref(0);
const showGroupName = ref(false);
const pageTotal = ref(0);
// 单个点击下载的内容
const countent = ref({});
// 表单的搜索内容
const search = ref({});
// 卡类型 0全部 1志愿卡 2升学 3体验
const status = ref(0);
// 页码
const pageDate = ref({
  page: 1,
  pageSize: 10,
});
const searchTab = reactive({
  list: [
    {
      name: '全部',
      idx: 0,
    },
    {
      name: '志愿卡',
      idx: 1,
    },
    {
      name: '升学卡',
      idx: 2,
    },
    {
      name: '体验卡',
      idx: 3,
    },
  ],
});

// const gridData = [
//   {
//     date: 'VIP',
//     name: '9',
//     address: '7',
//   },
//   {
//     date: '升学卡',
//     name: '0',
//     address: '0',
//   },
//   {
//     date: '自主招生卡',
//     name: '0',
//     address: '0',
//   },
//   {
//     date: '体验卡',
//     name: '2004',
//     address: '25',
//   },
// ]
const tableData = ref([]);

function tabSearchChange(idxVal) {
  idx.value = idxVal;
  status.value = idxVal;
  getList();
}

function onSubmit(val) {
  dialogTableVisible.value = true;
  countent.value = val;
}

// 点击卡号区间跳转
function detailrow(val) {
  router.push({ path: '/card/cardDate', query: { data: val } });
}

// 搜索
function searchListData() {
  getList();
}

// 统一获取所有搜索内容
const changeTime = (type, value) => {
  if ((type = 'addtime' && value)) {
    search.issuingTimeStatr = formatDate(value[0]).split(' ')[0];
    search.issuingTimeEnd = formatDate(value[1]).split(' ')[0];
  } else {
    search.issuingTimeStatr = '';
    search.issuingTimeEnd = '';
  }
  getList();
};

// 获取卡发行记录列表
function getList() {
  const data = {
    status: status.value,
    keywords: keywords.value,
    page: pageDate.value.page,
    pageSize: pageDate.value.pageSize,
    issuingTimeStatr: search.issuingTimeStatr,
    issuingTimeEnd: search.issuingTimeEnd,
  };
  getCouponLogList(data).then((res) => {
    pageTotal.value = res.data.pageTotal;
    tableData.value = res.data.list;
    for (const i of res.data.list) {
      // 拼接卡号
      i.StartStopTime = i.cardNoFirst + '-' + i.cardNoEnd;

      showGroupName.value = i.groupId == 0;

      i.disabled = user.groupId != i.groupId;
    }
  });
}
getList();

// 分页
function paginationChange() {
  getList();
}

// 下载卡密
function download() {
  couponExportPass({ id: countent.value.id })
    .then((res) => {
      if (res.code == 20000) {
        window.location.href = res.data.url;
        ElMessage.success('导出成功');
      }
      dialogTableVisible.value = false;
    })
    .catch(() => {});
}

// 导出发行记录
function onSubmitAll() {
  const data = {
    status: status.value,
    keywords: search.keywords,
    issuingTimeStatr: search.issuingTimeStatr,
    issuingTimeEnd: search.issuingTimeEnd,
  };
  couponSendExport(data)
    .then((res) => {
      if (res.code == 20000) {
        window.location.href = res.data.url;
        ElMessage.success('导出成功');
      }
    })
    .catch(() => {});
}
</script>
<style lang="scss" scoped>
.box-card {
  margin: 20px;
  padding: 10px;
  padding-top: 0;

  .card-header {
    display: flex;

    div {
      font-size: 20px;
      font-weight: 600;
      color: #1d2129;
      line-height: 20px;
    }
  }
}
</style>
